<template>
    <div>

        <input type="text" v-model="n1"/>
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2"/>
        <input type="button" value="=" @click="abc"/>
        <input type="text" v-model="result"/>


    </div>
</template>

<script>
    export default {
        name: "TestCalculator",
        data: function () {
            return {
                n1: 0,
                opt: '+',
                n2: 0,
                result: 0
            }
        },
        methods:{
            abc(){
                switch(this.opt){
                    case "+":
                        this.result = parseInt(this.n1) + parseInt(this.n2);
                        break;
                    case "-":
                        this.result = parseInt(this.n1) - parseInt(this.n2);
                        break;
                    case "*":
                        this.result = parseInt(this.n1) * parseInt(this.n2);
                        break;
                    case "/":
                        this.result = parseInt(this.n1) / parseInt(this.n2);
                        break;
                }
            },
            abc1(){
                const stringopt = "parseInt(this.n1)" + this.opt + "parseInt(this.n2) ";
                this.result = eval(stringopt);
            }
        }
    }
</script>

<style scoped>

</style>